<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta http-equiv="keywords" content="JavaScript,JS,Sudoku,数独">
	<meta http-equiv="description" content="JavaScript Sudoku,JS,Sudoku,数独">
    <link rel="bookmark" type="image/x-icon" href="images/favicon.ico" /> 
    <link rel="icon" type="image/x-icon" href="images/favicon.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" /> 
    <title>JavaScript Sudoku</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0 auto;
            background: #000;
            font-family: 'Microsft YaHei';
        }
        header a {
            color: #7f7f7f;
        }
        #page {
            width: 680px;
            margin: 36px auto;
        }
        h1 {
            width: 100%;
            margin: 16px 0;
            text-align: center;
            color: #afaffa;
        }
        #menu {
            float: right;
            margin-right: 20px;
            padding: 0;
        }
        .menu_btn {
            font-weight: bold;
            font-size: 18pt;
            height: 36px;
            color: #393;
        }
        .menu_input {
            width: 36px;
            height: 28px;
            color: #393;
            padding: 0;
            margin: 0;
        }
        #play_board {
            width: 640px;
            margin: 12px auto;
            border-spacing: 0;
            border-color: #fa0a0a;
            border-width: 0 0 1px 1px;
            border-style: solid;
            border-collapse: collapse;
        }
        #play_board tr td {
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            vertical-align: middle;
            margin: 0;
            padding: 2px;
            border-color: #0ff;
            border-width: 1px 1px 0 0;
            border-style: solid;
            border-collapse: collapse;
            background-color: #7a7;
            color: #33a;
            font-weight: bold;
            font-size: 16pt;
        }

        #play_board tr td input {
            width: 100%;
            height: 36px;
            display: block;
            margin: 0;
            padding: 0;
            text-align: center;
            vertical-align: middle;
            background-color: #ffa;
            border: 0;
            font-weight: bold;
            font-size: 16pt;
        }
        .cell {
            margin: 0 auto;
            height: 36px;
            line-height: 36px;
        }
        #tip {
            width: 640px;
            height: 0;
            background-color: #faabab;
            margin: 0 auto;
            padding: 0;
            z-index: 128;
            text-align: center;
            vertical-align: middle;
            font-size: 18pt;
            font-weight: bold;
            line-height: 32px;
        }
        #help_doc {
            -ms-filter: "progid:DXImageTransform.Microsfot.Alpha(Opacity=88)";
            filter: alpha(opacity=88);
            -moz-opacity: 0.88;
            -khtml-opacity: 0.88;
            opacity: 0.88;
            position: absolute;
            background-color: #eafaea;
            width: 60%;
            height: 64%;
            z-index: 1024;
            left: 20%;
            top: 32px;
            display: none;
        }
        #help_doc h2 {
            width: 100%;
            text-align: center;
            color: #3e3fea;
        }

        #help_doc p {
            padding-left: 12px;
            color: #3e3e3e;
        }
    </style>
    <script src="js/jquery-min.js" type="text/javascript"></script>
    <script src="js/sudoku.js" type="text/javascript"></script>
</head>
<body>
    <header>
        <a href="/">Go Back</a>
        <a href="mailto:chyxion@163.com">Contact Me</a>
        <span id="progress">0&#37;</span>
    </header>
    <div id="tip"></div>
    <div id="page">
        <h1>Super, Super Sudoku!</h1>
        <table id="play_board"><tbody></tbody></table>
        <div id="menu">
            <select id="sel_level">
                <option value="2">1</option>
                <option value="3">2</option>
                <option value="4">3</option>
                <option value="5">4</option>
                <option value="6"  selected="selected">5</option>
                <option value="7">6</option>
                <option value="8">7</option>
                <option value="9">8</option>
                <option value="10">9</option>
            </select>
            <input type="button" id="btn_set_level" class="menu_btn" value="Set Level" />
            <input type="button" id="btn_refresh" class="menu_btn" value="Refresh" />
            <input type="button" id="btn_help" class="menu_btn" value="Help" />
            <input type="button" id="btn_submit" class="menu_btn" value="Submit!" />
        </div>
    </div>
    <div id="help_doc">
        <h2>那一年，我十六岁，她也是</h2>
        <p>当你读到这里的时候，在下已经把心交给你了。</p>
        <p>0、游戏规则：每一行，每一列都是 1-9 就代表你成功啦！</p>
        <p>1、双击文本框可以看到提示。</p>
        <p>2、点击[Set Level]按钮可以修改等级。</p>
        <p>3、点击[Refresh]按钮刷新数据。</p>
        <p>4、点击[Help]按钮你就看到这里了。</p>
        <p>5、点击[Submit]按钮提交游戏结果。</p>
        <p>6、点击帮助文本区域关闭。</p>
        <p>7、如果有什么在下可以做的，邮件[<a href="mailto:chyxion@163.com">chyxion@163.com</a>]。</p>
    </div>
</body>
</html>
